<!-- 
 * 省市区选择器
 * @作者：张海菜
 -->
<template>
	<view class="region line-v-center">
		<picker mode="multiSelector" :range="range" range-key="name" @change="change" @columnchange="columnchange"
			:value="value" :disabled="disabled" class="region-picker">
			<div class="line-v-center">
				<view class="content" :class="{ placeholder: !regionStr }">
					<text class="ellipsis-1">{{ regionStr ? regionStr : placeholder }}</text>
				</view>
			</div>
		</picker>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		/**
		 * 数据
		 */
		props: {
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 默认值
			defaultValue: {
				type: Array,
				default () {
					return null;
				}
			}
		},

		/**
		 * 数据
		 */
		data() {
			return {
				regionData: [],
				range: [
					[],
					[],
					[]
				], // 省/市/区
				value: [0, 0,
				0], // value 的值表示选择了 range 中的第几个（下标从 0 开始）,默认为 [0, 0, 0]，即 range 为 ['第一个省', '第一个省的第一个市', '第一个省的第一个市的第一个区']
				regionStr: '', // 选中的省市区字符串
				placeholder: '请选择省/市/区'
			};
		},

		/**
		 * 监听数据
		 */

		watch: {
			// 默认值
			/* defaultValue() {
				// 设置/更新省市区数据
				this.defaultValue ? this.setDefaultValue() : this.setRange();
			} */
		},

		/**
		 * 组件初次加载完成
		 */
		async mounted() {
			this.regionData = [];
			let regionDataRes = await this.getRegionData();
			if (regionDataRes.code == 0) {
				for (let key in regionDataRes.data) {
					let provinceObj = {
						id:regionDataRes.data[key].id,
						name:regionDataRes.data[key].name,
						pid:regionDataRes.data[key].pid,
						level: regionDataRes.data[key].level,
					}
					provinceObj.children = [];
					//组装城市数据
					for (let c in regionDataRes.data[key].city) {
						let cityObj = {
							id:regionDataRes.data[key].city[c].id,
							name:regionDataRes.data[key].city[c].name,
							pid:regionDataRes.data[key].city[c].pid,
							level: regionDataRes.data[key].city[c].level,
						}
						provinceObj.children.push(cityObj)
						cityObj.children = [];
						for (let r in regionDataRes.data[key].city[c].region) {
							let regionObj = {
								id:regionDataRes.data[key].city[c].region[r].id,
								name:regionDataRes.data[key].city[c].region[r].name,
								pid:regionDataRes.data[key].city[c].region[r].pid,
								level: regionDataRes.data[key].city[c].region[r].level,
							}
							cityObj.children.push(regionObj)
						}
					}
					this.regionData.push(provinceObj);
				}
				// // 设置/更新省市区数据
				if (this.defaultValue.length > 0) {
					console.log('有默认地址')
					this.setDefaultValue()
				} else {
					console.log('无默认地址')
					this.setRange()
				}
				// this.defaultValue ? this.setDefaultValue() : this.setRange();
			}
		},

		/**
		 * 函数
		 */
		methods: {
			//获取省市区数据
			async getRegionData() {
				const that = this;
				return await new Promise((resolve, reject) => {
					app.globalRequest({
						api: app.getApi().user.getRegionList
					}).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},
			/**
			 * 设置/更新省市区数据
			 */
			setRange() {
				// 省市区数据
				let range = [
					[],
					[],
					[]
				];
				let regionData = this.regionData;

				// 省
				regionData.forEach(el => {
					range[0].push({
						id: el.id,
						level: el.level,
						name: el.name,
						pid: el.pid
					});
				});

				// 市
				regionData[this.value[0]].children.forEach(el => {
					range[1].push({
						id: el.id,
						level: el.level,
						name: el.name,
						pid: el.pid
					});
				});

				// 区
				regionData[this.value[0]].children[this.value[1]].children.forEach(el => {
					range[2].push({
						id: el.id,
						level: el.level,
						name: el.name,
						pid: el.pid
					});
				});

				// 更新省市区数据
				this.range = range;
			},

			/**
			 * 设置默认值
			 */
			setDefaultValue() {
				let regionData = this.regionData
				// 查找省
				let provinceIndex = regionData.findIndex(el => {
					return el.id == this.defaultValue[0];
				});
				if (provinceIndex < 0) provinceIndex = 0;

				// 查找市
				let cityIndex = regionData[provinceIndex].children.findIndex(el => {
					return el.id == this.defaultValue[1];
				});
				if (cityIndex < 0) cityIndex = 0;

				// 查找区
				let areaIndex = regionData[provinceIndex].children[cityIndex].children.findIndex(el => {
					return el.id == this.defaultValue[2];
				});
				if (areaIndex < 0) areaIndex = 0;

				// 更新 value 的值
				this.value = [provinceIndex, cityIndex, areaIndex];

				// 设置/更新省市区数据
				this.setRange();

				// 更新选中的省市区字符串
				this.regionStr = regionData[provinceIndex].name + '-' + regionData[provinceIndex].children[cityIndex]
					.name + '-' + regionData[provinceIndex].children[cityIndex].children[areaIndex].name;

			},

			/**
			 * 某一列的值改变时触发
			 * @param {Number} event.detail.column 表示改变了第几列（下标从0开始）
			 * @param {Number} event.detail.value 表示变更值的下标
			 */
			columnchange(event) {
				// 改变的是省
				if (event.detail.column == 0) {
					this.value = [event.detail.value, 0, 0];
				}
				// 改变的是市
				if (event.detail.column == 1) {
					this.value.splice(1, 1, event.detail.value);
					this.value.splice(2, 1, 0);
				}
				// 改变的是区
				if (event.detail.column == 2) {
					this.value.splice(2, 1, event.detail.value);
				}

				// 设置/更新省市区数据
				this.setRange();
			},

			/**
			 * 确认选择
			 */
			change(event) {
				let regionObj = {
					province_id: '',
					city_id: '',
					region_id: '',
				}
				//设置省份
				regionObj.province_id = this.range[0][this.value[0]].id;
				//设置城市
				regionObj.city_id = this.range[1][this.value[1]].id;
				//设置区
				regionObj.region_id = this.range[2][this.value[2]].id;
				// 更新选中的省市区字符串
				this.regionStr = this.range[0][this.value[0]].name + '-' + this.range[1][this.value[1]].name + '-' + this
					.range[2][this.value[2]].name;
				// 传递事件
				this.$emit('change', regionObj);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.region {
		width: 100%;
		height: 100%;
		justify-content: space-between;
	}

	.region-picker {
		flex: 1;
		overflow: hidden;
	}

	.ellipsis-1 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-size: 28rpx;
	}

	.content {
		width: 100%;
		// text-align: right;
	}

	.placeholder {
		color: #949596;
	}
</style>